<template>
  <div>
    <Row>
      <Col span="24">
        <div style="margin:10px 15px;">
          <Card>
            <div style="display: flex;flex:1;">
              <div style="flex:1;display: flex;align-items: center;justify-content: center;">
                  <Icon color="green" size="36" type="ios-checkmark-circle-outline" />
                  <div>
                    <p style="font-size:16px;color:green;text-align: center;"><span v-text="importSuccessNum"></span>条</p>
                    <p style="font-size:16px;color:green;text-align: center;">成功导入</p>
                  </div>
              </div>
              <div style="flex:1;display: flex;align-items: center;justify-content: center;">
                  <Icon color="#ff9900" size="36" type="ios-alert-outline" />
                  <div>
                    <p style="font-size:16px;color:#ff9900;text-align: center;"><span v-text="importExistNum"></span>条</p>
                    <p style="font-size:16px;color:#ff9900;text-align: center;">已存在</p>
                  </div>
              </div>
              <div style="flex:1;display: flex;align-items: center;justify-content: center;">
                  <Icon color="red" size="36" type="ios-close-circle-outline" />
                  <div>
                    <p style="font-size:16px;color:red;text-align: center;"><span v-text="importErrorNum"></span>条</p>
                    <p style="font-size:16px;color:red;text-align: center;">导入错误</p>
                  </div>
              </div>
            </div>
          </Card>
        </div>
      </Col>
    </Row>
    <Row>
      <Col span="24">
        <div style="margin:10px 15px;">
          <Tabs
            :importErrorStudent="importErrorStudent"
            :importErrorTeacher="importErrorTeacher"
            :importErrorGroup="importErrorGroup"
            :importErrorClassRoom="importErrorClassRoom"
            :importErrorStudentGroup="importErrorStudentGroup"
            ref="tabs" />
        </div>
      </Col>
    </Row>
    <Row>
      <Col span="24" style="text-align:center;">
        <Button @click="$emit('finish')" type="primary">完成</Button>
      </Col>
    </Row>
  </div>
</template>
<script>
import Tabs from './three-tabs/main'
export default {
  name: 'three',
  props: {
    importErrorNum: {
      type: Number,
      default: 0
    },
    importExistNum: {
      type: Number,
      default: 0
    },
    importSuccessNum: {
      type: Number,
      default: 0
    },
    importErrorStudent: {
      type: Number,
      default: 0
    },
    importErrorTeacher: {
      type: Number,
      default: 0
    },
    importErrorGroup: {
      type: Number,
      default: 0
    },
    importErrorClassRoom: {
      type: Number,
      default: 0
    },
    importErrorStudentGroup: {
      type: Number,
      default: 0
    }
  },
  components: {
    Tabs
  },
  methods: {
    reload (jobID) {
      this.$refs['tabs'].reload(jobID)
    },
    previous () {
      this.$emit('previous')
    }
  }
}
</script>
